<%@page import="org.proddevplm.dao.data.conceptSelection.PughAnalysis"%>
<script>

	$(function(){
		$("button").button();
	})
	
	function addConcept(){
		var text = document.getElementById('newConcept').value;
		var select = document.getElementById('conceptSelect');
		
		if(text!=null && text!=""){
			select.options[select.options.length] = new Option(text);
			document.getElementById('newConcept').value = null;
		}
	}
	
	function removeConcept(){
		$("#conceptSelect option").each(function(){
			if(this.selected){
				$(this).remove();
			}
		});
	}
	
	function clearConceptsList(){
		$('#conceptSelect >option').remove();
	}
	
	function nextStep3(){
		var index = 0;
		var list = '';
		$("#conceptSelect option").each(function(){
			if(index++>0){
				list+='~';
			}
			list+=$(this)[0].value;
		});
				
		var arguments = "activityName="+activityName+"&concepts="+list;
		ajaxCall("toolsManager", "24", arguments, null);
		$("#pughTab4").show();
		$("#pughTab4").click();
	}

</script>

<%
	PughAnalysis currentPugh = (PughAnalysis)session.getAttribute("currentPugh");
%>

<div class="containerSmall" style="width:auto">
	<div style="width:40%; float:left">
		<div style="text-align:left;">
			<b>Insert concept:</b><br/>
			<span style="font-style:oblique; font-size:smaller">insert concepts in the area below, then press <b>Add concept</b> button</span>
		</div>
		
		<div style="margin-top:10px; text-align:left;">
			<textarea class="regInput" id="newConcept" name="newConcept" rows="4" style="width:100%"></textarea>
		</div>
		
		<div style="width:100%; margin-top:10px;">
			<button id="addConcept" name="addConcept" onclick="addConcept()" style="width:40%; font-weight: bold; float:left;">Add concept</button>
		</div>
		<div style="clear:both;"></div>
	</div>
	
	<div style="width:55%; float:right">
		<div style="text-align:left;">
			<b>Set of concepts:</b>
		</div>
		
		<div style="margin-top:5px; text-align:left;">
			<%if(currentPugh == null || currentPugh.getConcepts()==null) {%>
				<select class="regInput" id="conceptSelect" name="conceptSelect" size="8" style="width:100%">
				</select>
			<%}else{ %>
				<select class="regInput" id="conceptSelect" name="conceptSelect" size="8" style="width:100%">
					<%String list = currentPugh.getConcepts();
					String[] array = list.split("~");
					for(int i=0; i<array.length; i++){%>
						<option value="<%=array[i] %>"><%=array[i] %></option>
					<%} %>
				</select>
			<%} %>
		</div>
		<div style="width:100%; margin-top:5px;">
			<button id="removeConcept" name="removeConcept" onclick="removeConcept()" style="width:30%; font-weight: bold; float:left;">Remove concept</button>
			<button id="clearConceptsList" name="clearConceptsList" onclick="clearConceptsList()" style="width:30%; font-weight: bold; float:center;">Clear list</button>
			<button id="nextStep3" name="nextStep3" onclick="nextStep3()" style="width:30%; font-weight: bold; float:right;">Next step</button>
		</div>
		<div style="clear:both;"></div>
	</div>
	
	<div style="clear:both"></div>
</div>